<template>
    <span>
        <button @click="count--">-</button>
        <input type="text" style="width:90px" v-model="count">
        <button @click="count++">+</button>
    </span>
</template>
<script setup>
// dfineProps 定义props
import {defineProps,ref,watch,defineEmits,watchEffect,defineExpose} from 'vue'
// 定义props传入参数
const props= defineProps({
    // 类型为数字或者字符串，默认值为1
    value:{type:[Number,String],default:1}
})
// 定义一个响应式对象初始值为 props.value
const count = ref(props.value)
// 定义事件发送器
var emits  = defineEmits(["input"])
// 监听count的变化
watch(count,()=>{
    // 发送一个input事件 事件的值为count的value
    emits("input",count.value)
})
// 在watchEffect都会被自动监听，执行局回调函数
// 只要watchEffect中出现了数据，数据发生变化时候，
// 都会执行watchEffect
watchEffect(()=>{
    count.value = props.value;
})
// defineExpose 规定了组件那些值可以被引用获取
defineExpose({count})


</script>